<template>
  <div>
    <div id="map" :style="{'height':height,minHeight:'20rem'}"></div>
  </div>
</template>
<script>
import AMap from 'AMap' // 引入高德地图
import Loca from "Loca"
import districts from "districts"
import earthQuake from "earthQuake"
import closeInfoWin from "closeInfoWin"
import openInfoWin from "openInfoWin"
export default {
  name: "map_component",
  props: {
    height:{
      type:String,
      default:""
    }
  },
  data() {
    return {}
  },
  mounted() {
    // this.init()
  },
  methods: {
    map_option(data_params) {
      var map = new AMap.Map('map', {
        mapStyle: 'amap://styles/grey',
        zoom: 4,
        center: [107.4976, 32.1697],
        features: ['bg', 'road'],
        // Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。
        // viewMode: '3D'
      });

      var layer = new Loca.PointLayer({
        map: map,
        eventSupport: true
      });

      // layer.setData(districts, {
      //   // 指定经纬度所在字段
      //   lnglat: 'center'
      // });

      layer.setData(data_params, {
        lnglat: function (data) {
          var item = data.value;
          // debugger
          return [Number(item.lng), Number(item.lat)];
        }
      });

      layer.setOptions({
        style: {
          // 圆形半径，单位像素
          radius: 5,
          // 填充颜色
          color: '#07E8E4',
          // 描边颜色
          borderColor: '#5DFBF9',
          // 描边宽度，单位像素
          borderWidth: 1,
          // 透明度 [0-1]
          opacity: 0.9,
        }
      });
      layer.on('mousemove', function (ev) {
        // 事件类型
        var type = ev.type;
        // 当前元素的原始数据
        var rawData = ev.rawData;
        // 原始鼠标事件
        var originalEvent = ev.originalEvent;

        openInfoWin(map, originalEvent, {
          '名称': rawData.cName,
          '位置': rawData.cAddress
        });
      });
      layer.on('mouseleave', function (ev) {
        closeInfoWin();
      });

      layer.render();

    },
    //初始化函数
    init(data_params) {
      console.log("数据初始化")
      this.map_option(data_params)
    }
  }
}
</script>
<style lang="scss" scoped>
#map {
  //margin-top:1rem;
  //height:30rem;
  width: 100%;
}
</style>
